<template>
	<view>
		<!-- 视频点击进来展示 -->
		<view class="video" v-if="data.isshowVideo">
			<video v-if="isPlay" id="myVideo" :src="data.videoInfo.video_text" :show-center-play-btn="false"
				:controls='controls' enable-play-gesture @timeupdate="handleTimeUpdate" @pause="pause"></video>
			<view class="video_ads flex_jc_cent" v-if="!isPlay">
				<image class="images" :src="data.videoInfo.image_text" mode="aspectFill"></image>
				<image class="play-icon" src="/static/play.png" @click="played" mode="aspectFill"></image>
			</view>
			<view class="tip" v-if="isshow && data.videoInfo.length!=0">
				已为你定位至 {{formatDuration(data.videoInfo.length)}}
			</view>
		</view>
		<view class="video" v-else>
			<image class="images" :src="data.info.image_text" mode="aspectFill"></image>
		</view>
		<view class="video_1">
			<view class="flex" style="padding:0rpx 36rpx;">
				<view class="price">
					<text>￥</text>{{data.info.price}}
				</view>
				<view class="tip">
					会员免费
				</view>
			</view>
			<view class="title" style="padding:0rpx 36rpx;">
				{{data.info.name}}
			</view>
			<view class="subtitle" style="padding:0rpx 36rpx;">
				{{data.info.title}}
			</view>

			<view class="flex_s">
				<view class="ites">
					<view class="t1" v-if="data.info.vodel && data.info.images">
						{{data.info.vodel.length+data.info.images.length}}节</view>
					<view class="t2">课时</view>
				</view>
				<view class="x"></view>
				<view class="ites">
					<view class="t1">{{data.info.people_num}}人</view>
					<view class="t2">已学习</view>
				</view>
				<view class="x"></view>
				<view class="ites">
					<view class="t1" v-if="data.info.is_complete == 1">未完结</view>
					<view class="t1" v-if="data.info.is_complete == 2">已完结</view>
					<view class="t2">更新状态</view>
				</view>
			</view>
		</view>


		<view class="video_2">
			<view class="video_tit">
				<view @click="change(0)" class="items " :class="index==0?'itemsselect':''">
					目录
					<view class="xs" v-show="index==0"></view>
				</view>
				<view @click="change(1)" class="items" :class="index==1?'itemsselect':''">
					简介
					<view class="xs" v-show="index==1"></view>
				</view>
			</view>
			<view class="" v-if="index== 0">
				<view class="video_v" v-if="data.info.images && data.info.vodel.length!=0">
					<view class="tit flex_jc_sb">
						<view class="flex">
							<view class="t1">信息课程</view>
							<view class="t2" v-if="data.info.is_pay == 0 && data.level == 0">未解锁</view>
							<view class="tt2" v-else>已解锁</view>
						</view>
						<view class="t3" v-if="data.info.vodel">
							共{{data.info.vodel.length}}节
						</view>
					</view>
					<view class="video_list" v-for="(item,index) in data.info.vodel" :key="index"
						@click="changeVideo(item)">
						<view class="video_list_tit">信息</view>
						<view class="video_list_text" :style="{color:item.isactive?'#0756FF':''}">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="x" v-if="data.info.images && data.info.images.length!=0"></view>
				<view class="video_v" v-if="data.info.images && data.info.images.length!=0">
					<view class="tit flex_jc_sb">
						<view class="flex">
							<view class="t1">课程资料</view>
							<view class="t2" v-if="data.info.is_pay == 0 && data.level == 0">未解锁</view>
							<view class="tt2" v-else>已解锁</view>
						</view>
						<view class="t3" v-if="data.info.images">
							共{{data.info.images.length}}节
						</view>
					</view>
					<view class="video_list" v-for="(item,index) in data.info.images" :key="index"
						@click="gotextdetail(item)">
						<view class="text_list_tit">资料</view>
						<view class="video_list_text">
							{{item.title}}.{{item.file_load_suffix_text}}
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="index == 1">
				<view class="texts" v-html="data.info.info">
				</view>
			</view>
		</view>
		<view class="" style="height:200rpx;">
		</view>
		<view class="footer_kf">
			<view class="cont flex_jc_sb">
				<view class="kf">
					<image src="/static/fx.png" mode=""></image>
					<view class="">
						分享
					</view>
					<button class="adsbtn" open-type="share"></button>
				</view>
				<!-- is_pay 0 未购买  1已购买 -->
				<view v-if="data.info.is_pay == 0 && data.level == 0" class="btn" @click="handleCreateOrder">
					立即支付 <text>￥</text>{{data.info.price}}
				</view>
				<view v-else class="btn1">
					已解锁
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getCourseDetail,
		upLog,
		createOrder
	} from '@/common/http.api.js';

	import {
		chattering
	} from '@/common/cont.js'
	const data = reactive({
		info: {},
		isshowVideo: false,
		videoInfo: {},
		nowTime: 0, //播放记录
		allTime:0,
		id: 0,
		videoId: 0,
		level: 0,
	})
	onShow(() => {
		data.level = uni.getStorageSync('user').level?uni.getStorageSync('user').level:0
		getCourseDetail({
			id: data.id
		}).then(res => {
			res.data.images.forEach(item => {
				item.isactive = false
			})
			//证明是从视频过来 需要渲染播放
			if (data.videoId) {
				//高亮
				res.data.vodel.forEach(item => {
					item.isactive = (item.id == data.videoId)
				})
				data.videoInfo = res.data.vodel.filter(item => {
					return item.id == data.videoId
				})[0]
				
				data.isshowVideo = true
				played()
			} else {
				res.data.vodel.forEach(item => {
					item.isactive = false
				})
			}
			data.info = res.data
		})
	})
	onLoad((option) => {
		data.id = option.id
		data.videoId = option.videoId
	})
	function formatDuration(seconds) {
		let showHours = true
		if (isNaN(seconds) || seconds < 0) return '00:00'
		const hours = Math.floor(seconds / 3600)
		const minutes = Math.floor((seconds % 3600) / 60)
		const remainingSeconds = seconds % 60
		// 补零函数
		const pad = n => n.toString().padStart(2, '0')
		return showHours || hours > 0 ?
			`${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}` :
			`${pad(minutes + hours * 60)}:${pad(remainingSeconds)}`
	}

	const myVideo = uni.createVideoContext("myVideo")
	const controls = ref(false)
	const isPlay = ref(false) //判断是否播放
	const isshow = ref(true)

	function played() {
		myVideo.seek(data.videoInfo.length) //跳转上次播放的位置
		myVideo.play()
		isPlay.value = true
		controls.value = true
		setTimeout(() => {
			isshow.value = false
		}, 2000)
	}
	//监听视频暂停
	function pause(e) {
		// isPlay.value = false
	}

	function handleTimeUpdate(e) {
		data.allTime = e.detail.duration
		data.nowTime = e.detail.currentTime
	}

	function gotextdetail(item) {
		if (data.info.is_pay == 0 && data.level == 0) {
			// popups.value.open()
			uni.showToast({
				icon: 'none',
				title: '请先解锁课程'
			})
			return
		}
		wx.showLoading({
			title: "资源下载中...",
		});
		wx.downloadFile({
			url: item.file_load_text, //后端返回的pdf路径
			filePath: `${wx.env.USER_DATA_PATH}/${item.title}.${item.file_load_suffix_text}`, //自定义pdf文件名
			success: function(res) {
				const filePath = res.filePath || res.tempFilePath
				console.log(res);
				wx.openDocument({
					showMenu: true, //分享按钮
					filePath: filePath,
					success: function(res) {
						wx.hideLoading();
					}
				})
			}
		})
		// uni.navigateTo({
		// 	url: `/pages/knowledge/textdetail?id=${item.id}`
		// })
	}
	//切换视频
	function changeVideo(item) {
		//没有购买就弹窗
		if (data.info.is_pay == 0 && data.level == 0) {
			// popups.value.open()
			uni.showToast({
				icon: 'none',
				title: '请先解锁课程'
			})
			return
		}
		data.isshowVideo = true
		data.info.vodel.forEach(item => {
			item.isactive = false
		})
		data.videoInfo = item
		wx.pageScrollTo({
			scrollTop: 0, //滚到顶部 
			duration: 0.5, //滚的到顶部需要的时间  动画
		})
		item.isactive = true
		myVideo.pause()
		isPlay.value = true
		isshow.value = true
		controls.value = true
		setTimeout(() => {
			myVideo.play()
		}, 300)
		setTimeout(() => {
			isshow.value = false
		}, 2000)
	}
	//下单
	function handleCreateOrder() {
		if(uni.getStorageSync('cirleToken')){
			uni.showLoading({
				title:'支付中...'
			})
			chattering(() => {
				createOrder({
					cate_id: data.info.id
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.hideLoading()
						uni.requestPayment({
							"provider": "wxpay", //固定值为"wxpay"
							appid: res.data.appId, // 应用ID（AppID）
							package: res.data.package, // 固定值
							nonceStr: res.data.nonceStr, // 随机字符串
							timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
							signType: res.data.signType, // 签名，这里用的 MD5 签名
							paySign: res.data.paySign,
							success: function(res) {
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								})
								setTimeout(()=>{
									getCourseDetail({
										id: data.id
									}).then(res => {
										data.info = res.data
									})
								},1000)
								
							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '支付取消'
								})
							}
						});
					}
				})
			})
		}else{
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}

	//页面隐藏 保存播放记录
	onUnload(() => {
		myVideo.pause()
		isPlay.value = false
		controls.value = false
		if (Math.floor(data.nowTime) != 0) {
			upLog({
				course_cate_id: data.videoInfo.id,
				length: Math.floor(data.nowTime),
				video_time_all: Math.floor(data.allTime)
			}).then(res => {
				console.log(res);
			})
		}

	})
	const index = ref(0)

	function change(i) {
		index.value = i
	}
</script>
<script>
	export default {
		onShareAppMessage() {
			return {
				title: '大会详情！',
				path: `/pages/knowledge/knowledgedetail?id=${this.data.id}&videoId=${this.data.videoId}`,
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #F7F8FC;
	}

	.video {
		width: 100%;
		height: 520rpx;
		position: relative;

		.images {
			width: 100%;
			height: 520rpx;
		}

		.tip {
			position: absolute;
			color: #fff;
			font-size: 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: rgba(0, 0, 0, 0.7);
			padding: 0rpx 6rpx;
			border-radius: 6rpx;
			left: 20rpx;
			bottom: 20rpx;
		}

		video {
			width: 100%;
			height: 520rpx;
		}

		.video_ads {
			position: absolute;
			width: 100%;
			height: 520rpx;
			top: 0%;

			.images {
				width: 100%;
				height: 520rpx;
				position: absolute;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
			}

		}
	}

	.video_1 {
		width: 750rpx;
		background: #FFFFFF;
		padding: 30rpx 0rpx;
		box-sizing: border-box;

		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 48rpx;
			color: #FF2352;

			text {
				font-size: 28rpx;
			}
		}

		.tip {
			width: 100rpx;
			height: 40rpx;
			background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1px solid #F9B781;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #8A3E00;
			text-align: center;
			line-height: 40rpx;
			margin-left: 15rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.subtitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #979797;
			margin-top: 10rpx;
		}

		.flex_s {
			display: flex;
			justify-content: space-evenly;
			border-top: 1px solid #D1D1D6;
			margin-top: 40rpx;
			align-items: center;

			.x {
				width: 2rpx;
				height: 60rpx;
				background: #D1D1D6;
			}

			.ites {
				text-align: center;
				margin-top: 20rpx;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #979797;
				}
			}
		}
	}

	.video_2 {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 28rpx 30rpx 1px 30rpx;
		box-sizing: border-box;

		.video_tit {
			display: flex;
			justify-content: space-evenly;

			.items {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #2F3245;
			}

			.itemsselect {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.xs {
				width: 32rpx;
				height: 6rpx;
				background: #0756FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin: 6rpx auto 0rpx;
			}

		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			margin: 20rpx 0rpx 20rpx 0rpx;
		}

		.x {
			width: 100%;
			height: 2rpx;
			background: #D1D1D6;
		}

		.video_v {
			margin-top: 20rpx;

			.tit {
				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
				}

				.t2 {
					width: 100rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1px solid #FF2352;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FF2352;
					line-height: 40rpx;
					text-align: center;
					margin-left: 15rpx;
				}

				.tt2 {
					width: 100rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1px solid #979797;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #979797;
					line-height: 40rpx;
					text-align: center;
					margin-left: 15rpx;
				}

				.t3 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #979797;
				}
			}

			.video_list {
				display: flex;
				align-items: center;
				margin: 30rpx auto;

				.video_list_tit {
					width: 88rpx;
					height: 48rpx;
					background: #0756FF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
				}
				.text_list_tit {
					width: 88rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 1px solid #0756FF;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					line-height: 48rpx;
					text-align: center;
					color: #0756FF;
				}

				.video_list_text {
					flex: 1;
					margin-left: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
			}
		}
	}

	.footer_kf {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			padding: 10rpx 30rpx 10rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			height: 120rpx;
			color: #000000;

			.kf {
				width: 60rpx;
				height: 100rpx;
				position: relative;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #545454;

				.adsbtn {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 0%;
					opacity: 0;
				}
			}

			.btn {
				width: 600rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				line-height: 80rpx;
				text-align: center;
				background: #FF2352;
				color: #fff;
			}

			.btn1 {
				width: 600rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				line-height: 80rpx;
				text-align: center;
				background: #F3F3F3;
				color: #979797;
			}
		}
	}
</style>